<template>
  <li class="options-li">
    <Tooltip content="图层置顶" placement="top">
      <toTop class="options-item to-top" width="18" @click="upTop()" height="18" />
    </Tooltip>
  </li>
  <li class="options-li">
    <Tooltip content="图层置底" placement="top">
      <toDown class="options-item to-down" width="18" @click="downTop()" height="18" />
    </Tooltip>
  </li>
  <li class="options-li">
    <Tooltip content="向上一层" placement="top">
      <Icon class="options-item to-one-top" type="md-trending-up" @click="up()" size="20" />
    </Tooltip>
  </li>
  <li class="options-li">
    <Tooltip content="向下一层" placement="top">
      <Icon class="options-item to-one-down" type="md-trending-down" @click="down()" size="20" />
    </Tooltip>
  </li>
</template>

<script setup name="Flip">
import useSelect from '@/hooks/select';

// 图层置顶
import toTop from '@/assets/svg/toTop.svg';
import toDown from '@/assets/svg/toDown.svg';

const { canvasEditor } = useSelect();

const up = () => {
  canvasEditor.up();
};
const upTop = () => {
  canvasEditor.toFront();
};
const down = () => {
  canvasEditor.down();
};
const downTop = () => {
  canvasEditor.toBack();
};
</script>

<style scoped lang="less"></style>
